<template>
  <div>
    <h1>【aty-textarea】 component demo</h1>
    <p>【aty-textarea】 本质</p>
    <div class="fd-textarea ">
      <aty-title level="4">1.textarea default 状态 </aty-title>
      <aty-textarea placeholder="请输入..." />
      <aty-input placeholder="请输入..."  />
      <aty-textarea placeholder="请输入..." rows="4"  />
      <aty-row>
        <aty-title level="4">v-model 数据双向绑定 </aty-title>
        <aty-col span="6">
          v-model
          <aty-textarea placeholder="请输入..." rows="4" v-model="value" />
        </aty-col>
        <aty-col span="6">
          value
          <aty-panel :text="value" />
        </aty-col>
      </aty-row>
    </div>
    <div class="fd-textarea ">
      <aty-title level="4">2.textarea autosize </aty-title>
      <aty-textarea placeholder="" :autosize="true" v-model="value" />
    </div>
    <div class="fd-textarea ">
      <aty-title level="4">3.textarea disabled 状态 </aty-title>
      <aty-textarea placeholder="请输入..." :disabled="true" value="555555555555"/>
    </div>
    <div class="fd-textarea aty-form-item-error">
      <aty-title level="4">4.textarea error 状态 </aty-title>
      <aty-textarea placeholder="请输入..."  v-model="value"/>
    </div>
    <div class="fd-textarea">
      <aty-title level="4">5.textarea 带label校验</aty-title>
      <aty-textarea placeholder="请输入..."
                     v-model="value"
                    :label="'label'"
                    :labelWidth="80"
                    :labelPosition="'right'"
                    elementId="jsInput"
                    prop="label"
                    :required="true"
                    :min="20"
                    :showMessage="true" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      label: '',
      value: ''
    }
  }
  //  components: { Alert, Icon }
}
</script>
<style   lang="less"  type="text/less" >
    /*出错*/
    .fd-textarea {
        padding: 20px;
        .aty-textarea-wrapper {
            margin-bottom: 1em;
        }
    }
</style>
